<template>
  <div>
    <van-cell-group class="my-course">
      <van-cell v-for="(item, index) in courseList" :key="index">
        <div class="left" slot="title">
          <span class="title">{{ item.kcname }}</span>
          <span class="time">下次课时间：{{ item.sktime }}</span>
        </div>
        <div class="icons">
          <span @click="showAdd = true">
            <img src="../../../../assets/img/icon-edit.png" alt="" width="20px">
          </span>
          <span @click="toDelete">
            <img src="../../../../assets/img/icon-delete.png" alt="" width="20px">
          </span>
        </div>
      </van-cell>
    </van-cell-group>
    <div class="add">
      <van-button type="info" plain hairline size="large" @click="showAdd = true">添加</van-button>
    </div>

    <!-- 添加课程弹出层 -->
    <van-dialog
      class="close-dialog"
      v-model="showAdd"
      show-cancel-button>
      <van-cell-group>
        <van-field label="课程类型" v-model="addForm.type" @click="toShowAction('type')" is-link arrow-direction="down" disabled/>
        <van-field v-model="addForm.name" label="课程名称"/>
        <van-field v-model="addForm.student" label="学生姓名" @click="toSelectStudent" disabled/>
        <van-field label="重复方式" v-model="addForm.repeat" @click="toShowAction('repeat')" is-link arrow-direction="down" disabled/>
        <van-field label="上课时间" v-model="addForm.time" @click="showDate = true" is-link arrow-direction="down" disabled/>
        <van-field v-model="addForm.address" label="上课地点"/>
        <van-field v-model="addForm.lesson" label="剩余课时"/>
      </van-cell-group>
      <div class="close" slot="title" @click="showAdd = false"><img src="../../../../assets/img/icon-close.png" alt=""></div>
    </van-dialog>

    <!-- 类型方式选择弹出层 -->
    <van-action-sheet
      v-model="showType"
      :actions="isType ? types : repeats"
      @select="onSelectType"
      cancel-text="取消"
      :round="false"
      :title="isType ? '请选择课程类型' : '请选择重复方式'"
    />

    <!-- 时间选择弹出层 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        type="datetime"
        @cancel="dateCancel"
        @confirm="dateConfirm"
        :min-date="minDate"/>
    </van-popup>
  </div>
</template>

<script>
import {datetimeFormat} from '@/utils'
import api from '@/api'
export default {
  name: 'my-course',
  data () {
    return {
      courseList: [],
      showAdd: false,
      addForm: {
        type: '',
        name: '',
        student: '',
        repeat: '',
        time: '',
        address: '',
        lesson: ''
      },
      showType: false,
      isType: true,
      types: [
        { name: 'VIP一对一课程', value: 0 },
        { name: '集体课程', value: 1 }
      ],
      repeats: [
        {name: '单周', type: 1},
        {name: '双周', type: 2},
        {name: '不重复', type: 3}
      ],
      showDate: false,
      minDate: new Date()
    }
  },
  mounted () {
    this.select()
  },
  methods: {
    // 查询课程  teacherIndexCur
    select () {
      let params = {
        teacher_id: '1'
      }
      api.teacherIndexCur({
        params,
        callback: res => {
          console.log(res.data.data)
          this.courseList = res.data.data
        }
      })
    },
    // 删除课程
    toDelete () {},

    onSelectType (item) {
      if (this.isType) {
        this.addForm.type = item.name
      } else {
        this.addForm.repeat = item.name
      }
      this.showType = false
    },
    toShowAction (str) {
      if (str === 'type') {
        this.isType = true
      } else if (str === 'repeat') {
        this.isType = false
      }
      this.showType = true
    },

    dateCancel () {
      this.showDate = false
    },
    dateConfirm (value) {
      console.log(datetimeFormat(value))
      this.addForm.time = datetimeFormat(value)
      this.showDate = false
    },
    toSelectStudent () {
      window.sessionStorage.setItem('addForm', JSON.stringify(this.addForm))
      this.$router.push('/select/student/list')
    }
  },
  created () {
    // 判断是不是选择学生之后跳转回来，显示弹窗 -> 回显数据 -> 清除缓存数据
    let formData = window.sessionStorage.getItem('addForm')
    if (formData) {
      let data = JSON.parse(formData)
      Object.keys(data).forEach(key => {
        this.addForm[key] = data[key]
      })
      this.showAdd = true
      window.sessionStorage.removeItem('addForm')
    }
    let students = window.sessionStorage.getItem('studentList')
    if (students) {
      let list = JSON.parse(students)
      let arr = []
      list.forEach(item => {
        arr.push(item.name)
      })
      console.log(arr.join('、'))
      this.addForm.student = arr.join('、')
      window.sessionStorage.removeItem('studentList')
    }
  }
}
</script>

<style scoped>
  .icons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
  }
  .icons span, .icons a{
    display: inline-block;
    width: 20px;
    height: 20px;
  }
  .left{
    height: 50px;
    display: flex;
    align-items: center;
  }
  .left .title{
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: rgba(30,30,30,1);
  }
  .left .time{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(102,102,102,1);
    margin-left: 10px;
  }
  .add{
    padding: 10px;
    margin-top: 50px;
  }
</style>
